<template>
  <div class="wrap">
    <div class="title">
      <div>
        <img src="../assets/shop.png" class="shopUrl" alt />
        <p>{{info.username}}</p>
      </div>
      <p>共{{info.total}}个商品</p>
    </div>
    <div class="shopList">
      <img :src="item.order_image" :onerror="defaultImg2" alt v-for="item in list.orderList" :key="item.order_id" @click="showImg(item.order_image)"/>
    </div>
    <div class="item" style="border-bottom: 10px solid #e5e5e5;">
      <div class="tops">
         <img src="../assets/maxj.png" class="icon" alt />
         <p  @click="copy(0)">复制</p>
      </div>
      <div class="center">
        <input type="text" placeholder="请输入名称" :value="list.takeAddress.name" readonly />
      </div>
      <div class="center">
        <input type="text" placeholder="请输入手机号" :value="list.takeAddress.tel" readonly />
      </div>
      <div class="center"> 
        <input type="text" placeholder="请输入所在城市" :value="list.takeAddress.province+','+list.takeAddress.city+','+list.takeAddress.district" readonly />
      </div>
      <div class="center">
        <input type="text" placeholder="请输入详细地址" :value="list.takeAddress.content" readonly />
      </div>

    </div>
    <div class="item">
      
      <div class="tops">
         <img src="../assets/maxs.png" class="icon" alt />
         <p @click="copy(1)">复制</p>
      </div>
      <div class="center">
        <input type="text" placeholder="请输入名称" :value="list.deliveryAddress.name" readonly />
      </div>
      <div class="center">
        <input type="text" placeholder="请输入手机号" :value="list.deliveryAddress.tel" readonly  />
      </div>
      <div class="center">
        <input type="text" placeholder="请输入所在城市" :value="list.deliveryAddress.province+','+list.deliveryAddress.city+','+list.deliveryAddress.district"  readonly  />
      </div>
      <div class="center">
        <input type="text" placeholder="请输入详细地址" :value="list.deliveryAddress.content" readonly  />
      </div>
    </div>
    <div class="infos">
      <div class="info-item">
        <span>输入运单号:</span>
        <input type="text" placeholder="请输入运单号">
      </div>
       <div class="info-item">
        <span>选择物流:</span>
        <input type="text" placeholder="请选择快递">
      </div>
    </div>

    <p class="btn" @click="next">提交</p>
    <van-popup v-model="show">
      <img :src="src" class="showmax" alt="">
    </van-popup>

  </div>
</template>
<style lang="scss" scoped>
.infos{
  .info-item{
    display: flex;
    justify-content: center;
    margin: 8px 0;
    span{
      color: #999;
      font-size:.346667rem;
      text-align: right;
      width: 80px;
      display: block;
      margin-right: 15px;
      line-height: .866667rem;
    }
    input{
      display: block;
      outline: none;
      border: .5px solid #999;
      width: 6rem;
      height: .866667rem;
      border-radius: 8px;
      text-indent: 10px;
    }
  }
}
.showmax{
   width: 8.4rem;
}
.tops{
  display: flex;
  align-items: center;
  justify-content: space-between;
   p {
          color: #fff;
    font-size: 0.32rem;
    text-align: center;
    background: #719BEF;
    border-radius: 50px;
    padding: 2px 20px;
    margin-right: 8px;
    font-weight: normal;
    }
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 8.4rem;
  margin: 0.666667rem auto 0;

  div {
    display: flex;
    align-items: center;
    .shopUrl {
          width: 0.8rem;
      display: block;
    }
    p {
      margin-left: 0.333333rem;
      font-size: 0.4rem;
      color: #555;
    }
  }
  p {
    color: #999;
    font-size: 0.373333rem;
  }
}
.shopList {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 10px solid #e5e5e5;
  padding-bottom: 0.4rem;
  margin: 0.4rem auto 0;
  padding: 0 0.8rem 0.4rem;
  img {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.266667rem;
    margin-right: 0.2rem;
    margin-bottom: 0.2rem;
    display: block;
  }
}
.item:last-child .center {
  border: none;
}
.item {
  margin: 0 auto 0;
  padding: 0.4rem 0.8rem;
  .icon {
    width: 1.16rem;
    height: 1.16rem;
    border-radius: 50%;
    display: block;
  }

  .center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    height: 1.2rem;
    width: 7.9rem;
    margin-bottom: 2px;
    i{
      display: block;
      background: #e5e5e5;
      width: 1px;
      height: .6rem;
      margin-right: 10px;
    }
    input {
      outline: none;
      border: none;
      display: block;
      font-size: 0.32rem;
      color: #555;
      flex: 2;
      height: 98%;
    }
    .rights {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 0.133333rem;
      .address-icon {
        width: 0.44rem;
        height: 0.493333rem;
        display: block;
        margin-bottom: 0.133333rem;
      }
      span {
        color: #999;
        font-size: 0.24rem;
      }
    }
  }
}
.btn {
  width: 8.16rem;
  height: 1.066667rem;
  margin: 1rem auto 0;
  background: #719BEF;
  color: #fff;
  font-size: 0.48rem;
  text-align: center;
  line-height: 1.066667rem;
  border-radius: 0.266667rem;
}
.wrap{
  padding-bottom: 1rem;
}
</style>
<script>
export default {
  created() {
    document.title = "填写地址";
    this.info = JSON.parse(this.$route.query.info)
    this.list = JSON.parse(this.$route.query.list)
    this.state = this.$route.query.state==0?false:true
    console.log(this.info)
    console.log(this.list)
  },
  data(){
    return {
      show:false,
      state:false,
      info:{},
      list:{},
      src:"",
      str:"",
      defaultImg2: 'this.src="'+ require('../assets/timg.jpg') +'"',
    }
  },
  methods: {
    next() {
      this.$router.push("/setAddress");
    },
    goList() {
      this.$router.push("/selectUser");
    },
    showImg(src){
      this.src = src
      this.show = true
    },
    copy(n){
      if(n==0){
        this.str = this.list.takeAddress.name+','+  this.list.takeAddress.tel+','+ this.list.takeAddress.province+','+ this.list.takeAddress.city+','+ this.list.takeAddress.district+','+ this.list.takeAddress.content
      }else{
        this.str =  this.list.deliveryAddress.name+','+  this.list.deliveryAddress.tel+','+ this.list.deliveryAddress.province+','+ this.list.deliveryAddress.city+','+ this.list.deliveryAddress.district+','+ this.list.deliveryAddress.content
      }
      this.$copyText(this.str).then(res=>{
        console.log(res)
      },err=>{
        console.log(err)
      })
    },
    onCopy(e){
      console.log(e)
    },
    onError(e){
      console.log(e)
    }
  }
};
</script>